<template>
	<div>
      <div class="tab-tit-tip">
         -数据每日使用次数-
      </div>
      <div id="main-echart2" style="height:280px">
      </div>
      <div class="tab-tit-tip">
         <span class="tip-icon"></span>数据每日使用次数
      </div>
		<el-table class="table" v-loading="loading" :data="tablesList" max-height="290" @selection-change="handleSelectionChange" @row-click="handleRowClick" border>
            <el-table-column label="序号" align="center" width="85">
               <template slot-scope="scope">
                  {{scope.$index+1}}
               </template>
            </el-table-column>
            <el-table-column label="日期" align="center" key="createTime" prop="createTime" width="199"  :show-overflow-tooltip="true" >
               <template slot-scope="scope">
                  <span>{{parseTime(new Date(scope.row.createTime),'{y}-{m}-{d}')}}</span>
               </template>
            </el-table-column>
            <el-table-column label="内容权限账号数" align="center" key="totalAccount" prop="totalAccount" width="199"  :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column label="收藏账号数" align="center" key="totalConcern" prop="totalConcern" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column label="当日使用次数" align="center" key="queryTimes" prop="queryTimes">
            </el-table-column>
            <el-table-column label="累计使用次数" align="center" key="totalQueryTimes" prop="totalQueryTimes" width="199" >
            </el-table-column>
      </el-table>
      <pagination
         v-show="total > 0"
         :total="total"
         :page.sync="queryParams.pageNum"
         :limit.sync="queryParams.pageSize"
         @pagination="getTablesList"
      />
	</div>
</template>
<script>
import * as echarts from 'echarts';
import {getStatisticsList,getStatisticsMapList} from '@/api/dataManagement/system/statistics';
import {getDateTime,setData} from "@/utils/zkComm";
export default {
   name: "monitor",
   data(){
      return {
         // 遮罩层
         loading: false,
         total:0,
            // 查询参数
         queryParams: {
            pageNum: 1,
            pageSize: 30,
            userName: undefined,
            phonenumber: undefined,
            status: undefined,
            deptId: undefined
         },
         viewModelOptionsValue: "2",
      // 用户表格数据
         userList: [],
         tableId:'',
         EchartsList:[],
         tablesList:[],
      }
   },
   created(){
      this.tableId = this.$route.params.tableId;
      this.getEchartsList()
      this.getTablesList()
   },
   mounted(){
   },
   methods: {
       getEchartsList(){
         var params = {
            startDate :getDateTime().startdate,
            endDate :getDateTime().enddate,
            tableId:this.tableId
         }
         getStatisticsMapList(params).then(res=>{
            // this.EchartsList = res.rows || this.userList
            this.EchartsList = res.rows
            // this.allHandle()
            this.variatioHandle()
         })
      },
      getTablesList(){
         getStatisticsList({tableId:this.tableId}).then(res=>{
            this.tablesList = res.rows || this.userList
            this.total =  res.total
         })
      },
      initechart(obj){
         var chartDom = document.getElementById('main-echart2');
         var myChart = echarts.init(chartDom);
         var option = {
            tooltip: {
               trigger: 'axis',
               axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
               }
            },
            legend:obj.legend?obj.legend:null,
            grid:obj.grid?obj.grid:null,
            xAxis: {
               type: 'category',
               data: obj.xAxis.data||['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
               type: 'value',
            },
            series: obj.series
         };
         myChart.setOption(option);
         window.onresize = myChart.resize
      },
      updataHandle(){
         this.getEchartsList()
      },
      //变化量
      variatioHandle(){
         var setEchart = setData("dataCount","createTime",this.EchartsList,this);
         var data = {
            legend: {
               data: [ '权限账号数', '收藏账号数', '当日使用次数','累计使用次数']
            },
            xAxis: {
               data: setEchart.str||['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            grid: {
               left: '0%',
               right: '0%',
               bottom: '1%',
               top:'10%',
               containLabel: true
            },
            series:[
               {
                  name: '权限账号数',
                  type: 'bar',
                  stack: '广告',
                  itemStyle: {
                     color: '#409EFF'
                  },
                  data: setData("totalAccount","",this.EchartsList,this).num||[120, 132, 101, 134, 90, 230, 210]
               },
               {
                  name: '收藏账号数',
                  type: 'bar',
                  stack: '广告',
                  itemStyle: {
                     color: '#67C23A'
                  },
                  data: setData("totalConcern","",this.EchartsList,this).num||[220, 182, 191, 234, 290, 330, 310]
               },
               {
                  name: '当日使用次数',
                  type: 'bar',
                  stack: '广告',
                  itemStyle: {
                     color: '#E6A23C'
                  },
                  data: setData("queryTimes","",this.EchartsList,this).num||[150, 232, 201, 154, 190, 330, 410]
               },
               {
                  name: '累计使用次数',
                  type: 'bar',
                  stack: '广告',
                  itemStyle: {
                     color: '#F56C6C'
                  },
                  data: setData("totalQueryTimes","",this.EchartsList,this).num|| [150, 232, 201, 154, 190, 330, 410]
               },
            ]
         }
         this.initechart(data)
      },

      //   表格
      handleSelectionChange(){

      },
      handleRowClick(){
      },
   },
}
</script>

<style lang="scss" scoped>
/****
 reset element style
.

 */
 @import '@/assets/styles/system/common.scss';
 .el-col-12{
    text-align: right;
 }
.table{
   margin-top:10px;
}
 /****
 reset element style
.

 */
 .operation {
	 margin:20px 0;
	 .search-select-parent{
		 width:320px;
	 }
	 .search-select-child,.search-select-descen{
		  width:160px;
		  margin-left:10px;
	 }
	 .el-button--mini{
		 width:100%;
		 margin-right:10px;
	 }
 }
</style>